<template>
  <div class="type-list clearfix">
      <a href="javascript:void(0)" @click="gotoNews('vue')">
        <span><i class="iconfont icon-vuejs"></i>Vue</span>
      </a>
      <a href="javascript:void(0)" @click="gotoNews('js')">
        <span><i class="iconfont icon-js"></i>JS</span>
      </a>
      <a href="javascript:void(0)" @click="gotoNews('app')">
        <span><i class="iconfont icon-app1"></i>app</span>
      </a>
      <a href="javascript:void(0)" @click="gotoNews('php')">
        <span><i class="iconfont icon-php"></i>php</span>
      </a>
      <a href="javascript:void(0)" @click="gotoNews('学习')">
        <span><i class="iconfont icon-icon-test"></i>学习</span>
      </a>
      <a href="javascript:void(0)" @click="gotoNews('基金')">
        <span><i class="iconfont icon-jijin"></i>基金</span>
      </a>
      <a href="javascript:void(0)" @click="gotoNews('ppt')">
        <span><i class="iconfont icon-ppt"></i>ppt</span>
      </a>
      <a href="javascript:void(0)" @click="gotoNews('电影')">
        <span><i class="iconfont icon-dianying"></i>电影</span>
      </a>
  </div>
</template>

<script>
export default {
  methods: {
    gotoNews (name) {
      this.$emit('gotoNews', name)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .type-list
    padding: 20px 0 0 30px
    background-color: #fff
    a
      display: inline-block
      height: 40px
      float left
      width: 50%
      margin-top 20px
      span
        vertical-align: top
        line-height: 26px
        padding-left 20px
        i
          margin-right 10px
          font-size 18px
      &:nth-child(1)
        i
          color #f2c05f
      &:nth-child(2)
        i
          color #ed5d55
      &:nth-child(3)
        i
          color #40a2b3
      &:nth-child(4)
        i
          color #40a2b3
      &:nth-child(5)
        i
          color #f2c05f
      &:nth-child(6)
        i
          color #457d7c
      &:nth-child(7)
        i
          color #ed5d55
      &:nth-child(8)
        i
          color #f2c05f
</style>
